import { Menu } from "antd";
import { MenuItemType } from "antd/es/menu/interface";
import { useCallback, useEffect, useMemo, useState } from "react";
import React from "react";
import { Link, useMatches } from "react-router-dom";

import { antdIcons } from "@/assets/antd-icons";
import { Menu as MenuObj } from "@/global-service";
import { useGlobalStore } from "@/stores/global";
import { useUserStore } from "@/stores/user";

export default function SLideMenu() {
    const { collapsed, darkMode } = useGlobalStore();
    const matches = useMatches();

    const [openKeys, setOpenKeys] = useState<string[]>([]);
    const [selectKeys, setSelectKeys] = useState<string[]>([]);

    const { currentUser } = useUserStore();

    useEffect(() => {
        const [match] = matches || [];
        if (match) {
            // 获取当前匹配的路由，默认为最后一个
            const route = matches[matches.length - 1];
            // 从匹配的路由中取出定义参数
            const handle = route?.handle as { parentPaths: []; path: string };

            // 从自定义参数中取出上级 path,让菜单自动展开
            if (collapsed) {
                setOpenKeys([]);
            } else {
                setOpenKeys(handle?.parentPaths || []);
            }

            // 让当前菜单和所有商机菜单高亮显示
            setSelectKeys([...(handle?.parentPaths || [])]);
        }
    }, [matches, collapsed]);

    const getMenuTitle = (menu: MenuObj) => {
        const len = menu?.children?.filter((menu) => menu.show)?.length;

        if (len) {
            return menu.name;
        }

        return <Link to={menu.path}> {menu.name}</Link>;
    };

    // ???  为什么这么用 useCallBack
    const treeMenuData = useCallback((menus: MenuObj[]): MenuItemType[] => {
        return menus.map((menu: MenuObj) => {
            const children =
                menu?.children?.filter((menu) => {
                    menu.show;
                }) || [];
            return {
                key: menu.path,
                label: getMenuTitle(menu),
                icon: menu.icon && antdIcons[menu.icon] && React.createElement(antdIcons[menu.icon]),
                children: children.length ? treeMenuData(children || []) : null,
            };
        });
    }, []);

    // ??? useMemo
    const menuData = useMemo(() => {
        return treeMenuData(currentUser?.menus?.filter((menu) => menu.show) || []);
    }, [currentUser]);

    return (
        <Menu
            className="bg-transparent"
            mode="inline"
            selectedKeys={selectKeys}
            items={menuData}
            inlineCollapsed={collapsed}
            openKeys={openKeys}
            onOpenChange={setOpenKeys}
            theme={darkMode ? "dark" : "light"}
        />
    );
}
